<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css />
<script src="tinkerlib.min.js" type="text/javascript"></script>
    <link href="tinkerlib.yui.css" rel="stylesheet" type="text/css" />   
    
<script type="text/javascript">
  var SampleData = [{
        "Id": "210",
        "Name": "Name 1",
        "Category": "Permanent",
        "Project": "HRMS",
        "City": "Chennai",
        "Department": "Testing",s
        "Designation": "SE",
        "Salary": "16000"
    }, {
        "Id": "187",
        "Name": "Name 2",
        "Category": "Permanent",
        "Project": "HRMS",
        "City": "Chennai",
        "Department": "Testing",
        "Designation": "SE",
        "Salary": "13000"

    }, {
        "Id": "186",
        "Name": "Name 3",
        "Category": "Permanent",
        "Project": "HRMS",
        "City": "Chennai",
        "Department": "Testing",
        "Designation": "SE",
        "Salary": "12000"
    }, {
        "Id": "185",
        "Name": "Name 4",
        "Category": "Permanent",
        "Project": "HRMS",
        "City": "Bangalore",
        "Department": "Development",
        "Designation": "Lead",
        "Salary": "18000"
    }, {
        "Id": "184",
        "Name": "Name 5",
        "Category": "Temporary",
        "Project": "HRMS",
        "City": "Mumbai",
        "Department": "Testing",
        "Designation": "SE",
        "Salary": "12000"
    }, {
        "Id": "183",
        "Name": "Name 6",
        "Category": "Permanent",
        "Project": "Banking",
        "City": "Chennai",
        "Department": "Development",
        "Designation": "SSE",
        "Salary": "14000"
    }, {
        "Id": "182",
        "Name": "Name 7",
        "Category": "Permanent",
        "Project": "Banking",
        "City": "Chennai",
        "Department": "Testing",
        "Designation": "SE",
        "Salary": "12000"
    }, {
        "Id": "181",
        "Name": "Name 8",
        "Category": "Temporary",
        "Project": "HRMS",
        "City": "Bangalore",
        "Department": "Development",
        "Designation": "SSE",
        "Salary": "15000"
    }, {
        "Id": "180",
        "Name": "Name 9",
        "Category": "Temporary",
        "Project": "Banking",
        "City": "Mumbai",
        "Department": "Testing",
        "Designation": "Lead",
        "Salary": "17000"
    }, {
        "Id": "178",
        "Name": "Name 10",
        "Category": "Temporary",
        "Project": "Banking",
        "City": "Bangalore",
        "Department": "Development",
        "Designation": "SSE",
        "Salary": "13000"
    }];
          $(document).ready(function () {
              var pv = new XPivot();
              setTimeout(function () { pv.LoadingProgress("report", true) }, 10);
              LoadModel(pv);
          });


          function LoadModel(pv) {
              pv.ColulmnAreaFields = "Category";  // Column data field
            pv.RowAreaFields = "Project";  // Row data field
            pv.OptionFields = "City,Department,Designation";  //option fields for Edit layout.
            pv.DataAreaField = "Sum(Salary)";  //Data area field
            pv.DataDisplayType = DataType.Amount;  //Data type [Integer,Decimal,Amount,Date]
            pv.CustomDecimalPoint = DecimalPoint.None;  // Customise decimal point: [None,One,Two,Three,Four]
            pv.ReportTitle = "Sales Report";  // Header for Report
            pv.ReportData = SampleData;  // Json data
            pv.ContainerElementId = "report";  // Container where pivot table will be appended
            pv.Start();  // Create Report
          }
    
    
    </script>

</head


<body>

<div id="report"></div>

</body>


</html>